var c = document.getElementById('c');
var ctx = c.getContext('2d');

c.width = window.innerWidth * window.devicePixelRatio;
c.height = window.innerHeight * window.devicePixelRatio;

ctx.fillStyle = 'white';
ctx.fillRect(0, 0, c.width, c.height);

//绘制一个黑丝方块
ctx.fillStyle = 'black';
ctx.fillRect(10, 10, 200, 200);

ctx.save();

//剪切画布
ctx.beginPath();
ctx.rect(0, 0, 50, 50);
ctx.clip();

//红色圆
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.arc(100, 100, 100, 0, Math.PI * 2, false); //裁切之后的绘制仍以原始尺寸进行绘制，但可见区域只有裁切区域
ctx.stroke();
ctx.closePath();

ctx.restore();

//再次裁切
ctx.beginPath();    
ctx.rect(0, 0, 150, 150);
ctx.clip();

//蓝色圆
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
ctx.stroke();
ctx.closePath();